<template>
  <div class="bg-white overflow-hidden">
    <div class="form-title">企业技术创新信息</div>
    <el-form
      v-loading="formLoading"
      ref="financeForm"
      :model="tempFormObj"
      label-width="0"
    >
      <table
        class="self-table-form w-full table-auto border-collapse border"
        style="min-height: auto"
      >
        <thead>
          <th
            v-for="item in headNameList"
            :key="item"
            class="m-label text-center"
          >
            {{ item }}
          </th>
          <th class="m-label text-center w-20">操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tempFormObj.formList" :key="item.id">
            <td class="m-label text-center w-16">
              {{ index + 1 }}
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.name'"
                :rules="formRules.name"
              >
                <el-input type="text" v-model="item.name"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.type'"
                :rules="formRules.type"
              >
                <el-input type="text" v-model="item.type"></el-input>
              </el-form-item>
              <!-- <el-input type="text" v-model="item.type"></el-input> -->
            </td>

            <td>
              <el-form-item
                :prop="'formList.' + index + '.time'"
                :rules="formRules.time"
              >
                <el-date-picker
                  v-model="item.time"
                  align="right"
                  type="date"
                  prefix-icon="el-icon"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                  style="width: 5.875rem"
                >
                </el-date-picker>
              </el-form-item>

              <!-- <el-input type="text" v-model="item.relatedtime"></el-input> -->
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.salesProportion'"
                :rules="formRules.salesProportion"
              >
                <el-input type="text" v-model="item.salesProportion"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.development'"
                :rules="formRules.development"
              >
                <el-input type="text" v-model="item.development"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.train'"
                :rules="formRules.train"
              >
                <el-input type="text" v-model="item.train"></el-input>
              </el-form-item>
              <!-- <el-input type="text" v-model="item.train"></el-input> -->
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.prize'"
                :rules="formRules.prize"
              >
                <el-input type="text" v-model="item.prize"></el-input>
              </el-form-item>

              <!-- <el-input type="text" v-model="item.prize"></el-input> -->
            </td>
            <td>
              <div class="flex justify-center">
                <el-button
                  class="m-auto"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteFormItem(item.id)"
                >
                </el-button>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="headNameList.length + 1">
              <div class="flex justify-start">
                <el-button class="ml-0" type="primary" @click="addFormItem">
                  添加记录
                </el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="flex justify-between py-10 text-center">
        <el-button
          v-if="isSubmit"
          class="confirm-btn tracking-widest"
          type="primary"
          size="medium"
          @click="submitForm"
        >
          保存 / 下一步
        </el-button>
        <DeclareNextItem ref="next" v-show="false" />
      </div>
    </el-form>
  </div>
</template>

<script>
import { checNumber, limitLength } from "@/utils/formRules.js";
import { addInnovate } from "@/api/declareForm/innovate";
import { queryCompanyCopyrightList } from "@/api/enterprise/intellectual";
export default {
  name: "InnvoateForm",
  props: {
    sourceList: {
      type: Array,
      default: [],
    },
    isSubmit: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    sourceList: {
      handler(v, oldv) {
        this.coverCompanyInfo(v);
      },
      immediate: true,
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      formLoading: false,
      headNameList: [
        "序号",
        "知识产权类名",
        "类型",
        "获取知识产权时间",
        "企业研发经费按销售投入比例",
        "企业研发设备投入",
        "企业研发人员培训费用占比",
        "获得国家自然科学/技术发明/科技进步/奖项",
      ],
      modleFormObj: {
        id: -1,
        name: "",
        type: "",
        time: "",
        salesProportion: "",
        development: "",
        train: "",
        prize: "",
        relationId: "",
      },
      tempFormObj: {
        formList: [],
      },
      formRules: {
        name: [
          { required: true, message: "请输入知识产权类名", trigger: "blur" },
          {
            validator: limitLength(100),
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请输入类型", trigger: "blur" },
          {
            validator: limitLength(30),
            trigger: "blur",
          },
        ],
        time: [
          { required: true, message: "请选择获取时间 ", trigger: "change" },
        ],
        salesProportion: [
          { required: true, message: "请输入投入比例", trigger: "blur" },
          {
            validator: limitLength(10),
            trigger: "blur",
          },
        ],
        development: [
          { required: true, message: "请输入设备投入", trigger: "blur" },
          {
            validator: limitLength(10),
            trigger: "blur",
          },
        ],
        train: [
          { required: true, message: "请输入培训费用占比", trigger: "blur" },
          {
            validator: limitLength(10),
            trigger: "blur",
          },
        ],
        prize: [
          { required: true, message: "此字段不能为空", trigger: "blur" },
          {
            validator: limitLength(30),
            trigger: "blur",
          },
        ],
      },
      otherName: {
        patentName: "知识名",
        typeName: "类型",
        authorizationTime: "获取知识产权时间",
      },
      //  用户公司ID
      userCompanyId: "",
    };
  },
  created() {
    this.initRelationId();
  },
  methods: {
    coverCompanyInfo(sourceV) {
      let v = "";
      if (sourceV) {
        v = JSON.parse(JSON.stringify(sourceV));
      }
      if (v.length > 0 || this.sourceList.length > 0) {
        this.tempFormObj.formList = v;
      } else {
        this.getKonwList();
      }
    },

    getKonwList() {
      this.userCompanyId = this.$store.state.user.companyId;
      let obj = Object.assign({ companyId: this.userCompanyId });
      let that = this;
      queryCompanyCopyrightList(obj).then((response) => {
        if (response.code == 200) {
          let resourceData = response.rows;
          if (
            resourceData.length > 0 &&
            that.tempFormObj.formList.length <= 0
          ) {
            let tempObj = JSON.parse(JSON.stringify(that.modleFormObj));
            resourceData.forEach((item) => {
              if (item.id) {
                tempObj.id = item.id;
                tempObj["name"] = item["patentName"];
                tempObj["type"] = item["typeName"];
                tempObj["time"] = item["authorizationTime"];
                that.tempFormObj.formList = [];
                that.tempFormObj.formList.push(tempObj);
              }
            });
          }
        }
      });
    },
    initRelationId() {
      let relationId = this.$route.query.id;
      if (relationId) {
        this.modleFormObj.relationId = relationId;
      }
    },
    addFormItem() {
      let timeChuo = new Date();
      let addObj = JSON.parse(JSON.stringify(this.modleFormObj));
      addObj["id"] = timeChuo.valueOf();

      this.tempFormObj.formList.push(addObj);
    },
    deleteFormItem(id) {
      let tempArr = JSON.parse(JSON.stringify(this.tempFormObj.formList));
      let newArr = tempArr.filter((item) => {
        return item.id !== id;
      });
      this.tempFormObj.formList = newArr;
    },
    submitForm() {
      let formName = "financeForm";
      let resFrom = this.tempFormObj.formList;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formLoading = true;
          let requestObj = { relationId: this.$route.query.id, list: resFrom };
          addInnovate(requestObj).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "保存成功",
              });
              // 跳转至下一页
              this.$refs.next.nextDeclareItem();
            } else {
              this.$message.error(res.msg);
            }
            this.formLoading = false;
          });
        }
      });
    },
    checkFormHasV(rule, value, callback) {
      if (!value && value !== "0.00" && value !== 0) {
        return callback(new Error("该项为必填项"));
      }
      callback();
    },
  },
};
</script>

<style lang="scss" scoped></style>
